<template>
  <div id="root">
    <div class="home-container">
      <div class="fix-header common-component-wrapper" v-if="isShow"
           style="display: block; transform: translate(0px, 64px);">
        <div>
          <div class="feed-m-nav">
            <ul class="feed-default-nav">
              <li tabindex="0">
                <div class="show-monitor">
                  <div @click.prevent="searchByCid(-1)" class="feed-default-nav-item "
                       :class="[cindex==-1?'active':'']">推荐
                  </div>
                </div>
              </li>
              <li tabindex="0" v-for="(item,index) in citems" :key="item.id + index">
                <div class="show-monitor">
                  <div @click.prevent="searchByCid(index)" class="feed-default-nav-item "
                       :class="[cindex==index?'active':'']">{{ item.name }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="search-wrapper red">
            <div class="search">
              <input type="text" placeholder="" aria-label="搜索" v-model.trim="keyword">
              <button type="button" aria-label="搜索" @click.prevent="searchData"><i></i></button>
            </div>
          </div>

          <div class="user-icon red"  v-if="usershow" >

              <img :src="user.avatar" alt=""  @click.prevent="userInfo">

            {{ user.nickname }}
            <div class="user-list hover-list popup-container"
                 :class="[userinfo ?'popup-show popup-anime-show':'popup-hide popup-anime-hide']"
                 style="transform: scale(0.8); transform-origin: center top;">
              <div role="menu">

                <router-link :to="{path:'/user',query:{curid:1}}" target="_blank"  class="title">
                  个人主页
                </router-link>

                <router-link :to="{path:'/user',query:{curid:2}}" target="_blank"  class="title">
                  我的收藏
                </router-link>

                <a target="_self" rel="noopener" role="menuitem" tabindex="-1" @click.prevent="loginOut">退出登录</a>
              </div>
            </div>

          </div>

          <a class="login-button" rel="nofollow" @click.prevent="loginShow" v-if="!usershow">登录</a>
        </div>
      </div>

      <div class="recommendPage">
        <swiper
            :modules="modules"
            :slidesPerView="1"
            :spaceBetween="30"
            :autoplay="true"
            :loop="true"
            :navigation="true"
            :pagination="{ dynamicBullets: true }"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
        >
<!--          <swiper-slide><img src="../assets/2.png"></swiper-slide>-->
<!--          <swiper-slide><img src="../assets/1.jpg"></swiper-slide>-->
<!--          <swiper-slide><img src="../assets/1.jpg"></swiper-slide>-->
<!--          <swiper-slide><img src="../assets/2.png"></swiper-slide>-->
<!--          <swiper-slide><img src="../assets/1.jpg"></swiper-slide>-->
          <swiper-slide v-for="(slide, index) in this.banner" :key="slide.id + index" >
            <div><img :src="slide.img" alt=""></div>
          </swiper-slide>

        </swiper>
      </div>


      <div role="search" class="search-container">
        <div class="search-wrapper main-search white">
          <div class="search"><input type="text" placeholder="" aria-label="搜索" v-model.trim="keyword">
            <button type="button" aria-label="搜索" @click.prevent="searchData"><i></i></button>
          </div>

        </div>
      </div>
      <div class="main-content">
        <div role="main" class="left-container">
          <div class="show-monitor">
            <div>
              <div class="ttp-feed-module">
                <div class="main-nav-wrapper" style="margin-bottom:8px">
                  <div class="feed-m-nav">
                    <ul class="feed-default-nav">
                      <li tabindex="0">
                        <div class="show-monitor">
                          <div @click.prevent="searchByCid(-1)" class="feed-default-nav-item "
                               :class="[cindex==-1?'active':'']">推荐
                          </div>
                        </div>
                      </li>
                      <li tabindex="0" v-for="(item,index) in citems" :key="item.id + index">
                        <div class="show-monitor">
                          <div @click.prevent="searchByCid(index)" class="feed-default-nav-item "
                               :class="[cindex==index?'active':'']">{{ item.name }}
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
                <div>


                  <div class="feed-card-wrapper feed-card-article-wrapper" v-for="(item,index) in items"
                       :key="item.id + index">
                    <div class="feed-card-article no-cover">
                      <div class="feed-card-article-l">
                        <router-link :to="'/detail/'+item.id" target="_blank" rel="noopener" class="title">
                          {{ item.name }}
                        </router-link>
                        <div class="feed-card-footer-cmp">
                          <div class="left-tools">
                            <div class="feed-card-footer-tag-cmp" v-show="item.istop == 1">置顶</div>
                            <div class="feed-card-footer-cmp-author"><a
                                href="#"
                                target="_blank">{{ item.userName }}</a></div>
                            <div class="feed-card-footer-comment-cmp"><a
                                href="#" target="_blank"
                            >{{ item.views }}浏览</a></div>
                            <div class="feed-card-footer-time-cmp">{{ item.updateTime }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-container">

          <div class="show-monitor">
            <div class="home-hotboard" style="height: 515px;">
              <div style="position: static; left: 1148.5px; top: 88px;">
                <div class="ttp-hot-board">
                  <div class="title-bar"><h2 class="title">热搜榜</h2>
                    <button type="button" class="refresh" @click.prevent="huanyipi(2,10,false)" v-if="topone">换一换</button>
                    <button type="button" class="refresh" @click.prevent="huanyipi(1,10,true)" v-else>换一换</button>
                  </div>
                  <ol v-if="topone">
                    <li v-for="(item,index) in top"  :key="item.id + index">
                      <router-link :to="'/detail/'+item.id" target="_blank" rel="noopener" class="article-item">
                        <i class="icon-stick" v-if="index == 0"></i>
                        <span class="news-index num-1" v-else-if="index == 1">{{ index }}</span>
                        <span class="news-index num-2" v-else-if="index == 2">{{ index }}</span>
                        <span class="news-index num-3" v-else-if="index == 3">{{ index }}</span>
                        <span class="news-index num-4" v-else>{{ index }}</span>
                        <p class="news-title" >{{ item.name }}</p>
                        <i class="news-icon hot"></i>
                      </router-link>
                    </li>
                  </ol>
                  <ol v-else>
                    <li v-for="(item,index) in top"  :key="item.id + index">
                      <router-link :to="'/detail/'+item.id" target="_blank" rel="noopener" class="article-item">
                        <span class="news-index num-4" >1{{ index }}</span>
                        <p class="news-title" >{{ item.name }}</p>

                      </router-link>
                    </li>
                  </ol>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="ttp-modal-wrapper ttp-login-modal"
       :class="[ loginshow ? 'modal-show modal-anime-show':'modal-hide modal-anime-hide']">

    <div class="ttp-modal-mask"></div>
    <div role="dialog" aria-modal="true" aria-label="登录后内容更精彩" class="ttp-modal"  style="width: 420px;">
      <div class="ttp-modal-header"><span class="ttp-modal-title">登录后内容更精彩</span>
        <button type="button" aria-label="关闭弹窗" class="ttp-modal-close-btn"  @click.prevent="loginShow" ><i></i></button>
      </div>
      <!--登录-->
      <div class="ttp-modal-body">
        <div id="login_modal_ele">
          <div class="web-login-container">
            <article class="web-login">
              <article class="web-login-union">
                <div class="web-login-union__login">

                  <div class="web-login-union__login__form">
                    <div class="web-login-union__login__form__title">{{ biaoti }}</div>
                    <div class="web-login-union__login__form__content">
                      <article class="web-login-mobile-code">
                        <div class="web-login-mobile-code__mobile-input-wrapper">
                          <div class="web-login-normal-input">

                            <div class="web-login-area-code" v-if="loginway">
                              <div class="web-login-area-code__input-wrapper">
                                <input type="text" class="web-login-area-code__input-wrapper__input" value="+86">
                              </div>
                            </div>

                            <input type="tel" class="web-login-normal-input__input first-focus-el"
                                   ref="username" v-model.trim="user.username"
                                   :placeholder="placeholder" autocomplete="tel" maxlength="50" tabindex="0">
                          </div>
                        </div>

                        <div class="web-login-mobile-code__code-input-wrapper" v-if="!findpwd">

                          <div class="web-login-button-input" >
                            <!--发送验证码-->
                            <span v-if="showText && !pwdlogin" class="web-login-button-input__button-text send-input" tabindex="0" aria-live="off"
                                  :class="[ showText ? '':'web-login-button-input__button-text__disable']"
                              role="button" @click.prevent="sendCode()">
                              {{ tishi }}</span>
                            <!--发送验证码后60s内不可发送-->
                            <span v-if="!showText && !pwdlogin" class="web-login-button-input__button-text send-input" tabindex="0" aria-live="off"
                                  :class="[ showText ? '':'web-login-button-input__button-text__disable']"
                                  role="button">
                            {{ tishi }}</span>
                            <!--忘记密码-->
                            <span v-if="pwdlogin" class="web-login-button-input__button-text send-input" tabindex="0" aria-live="off"
                                  :class="[ showText ? '':'web-login-button-input__button-text__disable']"
                                  role="button" @click.prevent="wangjimima()">
                            忘记密码</span>

                            <div class="web-login-button-input__input-wrapper send-input">
                              <input name="button-input" class="web-login-button-input__input"
                                     ref="code" v-model.trim="user.code" :type="[ loginway ? 'tel':'password']"
                                     :placeholder="cplaceholder" autocomplete="off" maxlength="50" tabindex="0">
                            </div>

                          </div>
                        </div>

                        <div class="web-login-mobile-code__mobile-input-wrapper" v-if="findpwd">
                          <div class="web-login-normal-input">

                            <input type="password" class="web-login-normal-input__input first-focus-el"
                                   ref="pwd" v-model.trim="user.pwd"
                                   placeholder="输入新密码" autocomplete="tel" maxlength="50" tabindex="0">
                          </div>
                        </div>

                        <div class="web-login-mobile-code__mobile-input-wrapper" v-if="findpwd">
                          <div class="web-login-normal-input">

                            <input type="password" class="web-login-normal-input__input first-focus-el"
                                   ref="pwdtwo" v-model.trim="user.pwdtwo"
                                   placeholder="再次输入新密码" autocomplete="tel" maxlength="50" tabindex="0">
                          </div>
                        </div>

                        <div class="web-login-error" role="alert" aria-relevant="all" tabindex="0" v-show="msgshow">
                          {{info}}
                        </div>

                        <div class="web-login-mobile-code__button-wrapper"  v-if="loginway && !findpwd">
                          <button type="submit" class="web-login-button"  @click.prevent="toLogin">登录</button>
                        </div>

                        <div class="web-login-mobile-code__button-wrapper"  v-if="!loginway && !findpwd">
                          <button type="submit" class="web-login-button"  @click.prevent="toLoginPwd">密码登录</button>
                        </div>

                        <div class="web-login-mobile-code__button-wrapper"  v-if="findpwd">
                          <button type="submit" class="web-login-button"  @click.prevent="toRePwd">提交</button>
                        </div>
                      </article>
                    </div>
                  </div>
                </div>

                <div class="web-login-union__footer">

                  <div class="web-login-other-login-method" v-if="!findpwd">
                    <div class="web-login-other-login-method__text">其他登录</div>
                    <ul class="web-login-other-login-method__list">

                      <li class="web-login-other-login-method__list__item" tabindex="0" aria-label="帐密登录" role="button"
                      v-if="loginway" @click.prevent="loginways">
                        <i class="web-login-other-login-method__list__item__icon web-login-other-login-method__list__item__icon__account_pwd"></i>
                      </li>

                      <li class="web-login-other-login-method__list__item" tabindex="0" aria-label="手机登录" role="button"
                      v-if="!loginway" @click.prevent="loginwayss">
                        <i class="web-login-other-login-method__list__item__icon web-login-other-login-method__list__item__icon__mobile_code"></i>
                      </li>
                    </ul>
                  </div>

                  <div class="web-login-other-login-method" v-if="findpwd">
                    <div class="web-login-other-login-method__text"  style="cursor: pointer" @click.prevent="backlogin">返回登录</div>
                  </div>

                  <ul class="web-login-link-list"></ul>
                </div>
              </article>
            </article>
          </div>
        </div>
      </div>

      <div class="ttp-modal-footer"></div>
      <div tabindex="0"></div>
    </div>
  </div>
</template>

<script>

import articleService from '@/services/article'
import categoryService from '@/services/articlecategory';
import loginService from '@/services/login';
import bannerService from '@/services/banner';
//import pugMessage from "@/plugins/PugMessage";

// import Swiper core and required modules
import {Navigation, Pagination, Scrollbar, Autoplay, A11y, EffectFade} from 'swiper';
// Import Swiper Vue.js components
import {Swiper, SwiperSlide} from 'swiper/vue';
// Import Swiper styles
import "./style.css";
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/autoplay';

import {isEmpty,validPhone} from '@/utils/validate'
import {debounce} from '@/utils/utils'
import cache from '@/utils/cache'

export default {
  name: 'HomeView',
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      user: {
        pwd:"",
        pwdtwo:"",
        code: "",
        username: "18064752895",
        nickname:"",
        avatar:"",
        userId:"",
      },
      second: 60, //默认60秒
      showText: true, //判断短信是否发送

      loginway:true,//登录方式
      usershow:false,//用户头像和登录按钮控制
      userinfo:false,//个人信息页显示

      placeholder:"请输入手机号", // 登录输入提示
      placeindex:"", // 登录

      cplaceholder:"验证码",// 验证码输入提示
      cplaceindex:"",// 验证码输入

      tishi:"获取验证码",// 获取验证码|| 忘记密码
      pwdlogin:false,//是否是密码登录
      findpwd:false,//找回密码
      biaoti:"手机登录",//手机登录 || 账号登录

      loginshow:false,//登录显示
      msgshow:false,//错误提示显示
      info: "",   //用于保存登录失败后的提示信息

      pageNo: 1, //当前页码
      pageSize: 10, //每页显示20条数据
      total: 0, //总记录数
      pages: 0,//总页数
      categoryId: "",//按照分类进行搜索
      keyword: "",//搜索关键词
      isDelete: 0,//删除状态
      status: 1,//发布状态
      isShow: false, //控制头部导航是否显示
      items: {},// 装载数据的容器
      citems: {},
      cindex: -1, // 用控制选择分类的选中和激活

      top:"",//热门文章
      topone: true,//热门文章 1-10
      ismore:true,//还有更多文章

      banner:{},//轮播图
    }
  },
  mounted() {
    //document.title="新闻网"
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    console.log("this is current swiper instance object", this.swiper);
    // this.swiper.slideTo(3, 1000, false);
    //监听页面滚动
    window.addEventListener("scroll",  this.throttle(this.handleScrollx,100), true);
    window.onscroll = this.throttle(() => {
      this.scrollBottom();
    }, 1000) //滑动则触发事件,2000毫秒响应一次
  },
  created() {
    this.cindex = this.$route.params.index || -1
    this.categoryId = this.$route.params.cid || ""
    this.keyword = this.$route.params.keyword || ""
    this.findBannerList()
    this.loadData();
    this.loadCategoires();
    this.findArticleTop(1,10);
  },
  watch: {
    // 监听提示
    info: function () {
      // 清除上一次的定时器，如果不清楚自己去看效果，就会造成效果叠加
      if (this.stimer) clearInterval(this.stimer);
      // this.stimer是定时器对象，就是用来关闭用的
      this.stimer = setInterval(() => {
        this.msgshow = false;
      }, 2000)
    }
  },

  methods: {
    //返回登录
    backlogin(){
      this.findpwd = false
      this.biaoti = "账号登录"
    },
    //忘记密码
    wangjimima(){
      this.findpwd = true //切换至找回密码
      this.biaoti = "重置密码"
    },
    //查询轮播图
    findBannerList(){
      bannerService.findBannerList().then(res =>{
        this.banner = res.data
      })
    },
    //换一匹
    huanyipi(pageNo,pageSize,float){
      this.top=[]
      this.findArticleTop(pageNo,pageSize)
      this.topone = float
    },
    //获取热门文章
    findArticleTop(pageNo,pageSize){
      const params = {
        pageNo: pageNo,
        pageSize: pageSize,
      };
      articleService.findArticleTop(params).then(res => {
        this.top = res.data
      })
    },
    //退出登录
    async loginOut(){
      this.usershow = !this.usershow
      cache.local.remove("token");
      cache.local.remove("userid");
      cache.local.remove("avatar");
      cache.local.remove("nickname");
      cache.local.remove("userinfo");

      const params = {
        userId: this.user.userId
      };
      try{
        await  loginService.toLoginOut(params);

        console.log("退出成功")

      }catch(e){
        console.log(e)
      }
    },
    //个人信息页显示
    userInfo(){
      this.userinfo = !this.userinfo
    },
    sendCode(){
      debounce(this.getCode(),500);
    },
    //获取验证码
    async getCode(){
      var that = this;
      var phone = this.user.username;
      if (isEmpty(phone)) {
        this.msgshow = true;
        this.info = "手机号不能为空";
        this.$refs.username.focus();
        return;
      }

      if (!validPhone(phone)) {
        this.msgshow = true;
        this.info = "请输入正确的手机格式";
        this.$refs.username.focus();
        return;
      }

      that.showText = false;
      that.tishi = that.second +"s后重新发送";

      // 每隔一秒钟执行一次，形成倒计时
      var interval = setInterval(() => {
        that.showText = false;
        var times = that.second - 1;
        that.second = times;
        that.tishi = times+"s后重新发送";
      }, 1000);

      // 每隔60000(一分钟)执行一次恢复
      setTimeout(() => {
        clearInterval(interval);
        that.second = 60;
        that.showText = true;
        that.tishi = "获取验证码";
      }, 60000);
      // 异步执行发送短信
      try{
        const res = await loginService.sendPhoneCode(phone);
        if(res.data == "success"){
          console.log("短信发送成功")
        }
      }catch(e){

      }
    },
    // 登录逻辑
    async toLogin() {
      this.msgshow = false;
      var that = this;
      var phone = that.user.username;
      var smscode = that.user.code;
      if (isEmpty(this.user.username)) {
        this.msgshow = true;
        this.info = "手机号不能为空";
        this.$refs.username.focus();
        return;
      }

      if (!validPhone(this.user.username)) {
        this.msgshow = true;
        this.info = "请输入正确的手机格式";
        this.$refs.username.focus();
        return;
      }

      if (isEmpty(this.user.code)) {
        this.msgshow = true;
        this.info = "请输入验证码";
        this.$refs.code.focus();
        return;
      }

      try{
        // 执行登录服务异步处理
        const res =  await loginService.toLoginReg({phone,smscode})
        // 把服务返回的用户信息和token写入到缓存和全局对象globalData中
        cache.local.set("token",res.data.token);
        cache.local.set("userid",res.data.userId);
        cache.local.set("avatar",res.data.avatar);
        cache.local.set("nickname",res.data.nickname);
        cache.local.set("userinfo",JSON.stringify(res.data));
        this.loginshow = !this.loginshow
        this.usershow = !this.usershow
        this.user.avatar = res.data.avatar
        this.user.nickname = res.data.nickname
      }catch(e){
        //如果你要处理写
        this.msgshow = true;
        this.info = e.msg
        console.log(e)
      }
    },
    // 密码登录逻辑
    async toLoginPwd() {
      this.msgshow = false;
      var that = this;
      var phone = that.user.username;
      var password = that.user.code;
      if (isEmpty(this.user.username)) {
        this.msgshow = true;
        this.info = "账号不能为空";
        this.$refs.username.focus();
        return;
      }

      if (isEmpty(this.user.code)) {
        this.msgshow = true;
        this.info = "密码不能为空";
        this.$refs.code.focus();
        return;
      }

      try{
        // 执行登录服务异步处理
        const res =  await loginService.toLoginPwd({phone,password})
        // 把服务返回的用户信息和token写入到缓存和全局对象globalData中
        cache.local.set("token",res.data.token);
        cache.local.set("userid",res.data.userId);
        cache.local.set("avatar",res.data.avatar);
        cache.local.set("nickname",res.data.nickname);
        cache.local.set("userinfo",JSON.stringify(res.data));
        this.loginshow = !this.loginshow
        this.usershow = !this.usershow
        this.user.avatar = res.data.avatar
        this.user.nickname = res.data.nickname
      }catch(e){
        //如果你要处理写
        console.log(e)
        this.msgshow = true;
        this.info = e.msg
      }
    },
    //重置密码
    async toRePwd(){
      this.msgshow = false;
      var that = this;
      var phone = that.user.username;
      var password = that.user.pwd;

      if (isEmpty(this.user.username)) {
        this.msgshow = true;
        this.info = "账号不能为空";
        this.$refs.username.focus();
        return;
      }

      if (isEmpty(this.user.pwd)) {
        this.msgshow = true;
        this.info = "新密码不能为空";
        this.$refs.pwd.focus();
        return;
      }

      if (isEmpty(this.user.pwdtwo)) {
        this.msgshow = true;
        this.info = "密码确认不能为空";
        this.$refs.pwdtwo.focus();
        return;
      }

      if (this.user.pwd != this.user.pwdtwo) {
        this.msgshow = true;
        this.info = "两次密码不一致";
        this.$refs.pwd.focus();
        return;
      }

      try{
        // 执行登录服务异步处理
        await loginService.toRePwd({phone,password})
        this.findpwd = !this.findpwd
        //window.location.reload();
      }catch(e){
        this.msgshow = true;
        this.info = e.msg
        //如果你要处理写
      }

    },
    // 1: 查询文章列表分页数据
    loadData() {
      this.user.avatar = cache.local.get("avatar")
      this.user.nickname = cache.local.get("nickname")
      this.user.userId = cache.local.get("userid")
      if(this.user.avatar){
        this.usershow = true
      }
      // 参数
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        isDelete: this.isDelete,
        keyword: this.keyword,
        status: this.status,
        categoryId: this.categoryId,
      };
      // 发起异步请求
      articleService.findArticlePage(params).then(res => {
        // res.data 是完整的分页数据 -----R ---{data:""}
        const {total, pages, records} = res.data;
        console.log(res.data)
        // 分页要进行渲染
        this.total = total;
        // 总页数，后续可以判断边界
        this.pages = pages;
        // 具体产品数据 , js灵活性，可以动态增加对象的属性,避免服务器端增加字段。控制每个元素自身选中和不选中的问题
        records.forEach(item => item.checked = false);
        this.items = records;

      })
    },
    //获取分类数据
    loadCategoires() {
      categoryService.findArticleCategories().then(res => {
        if (res.status == 200) {
          var arr = res.data;
          this.citems = arr;
        }
      })
    },
    // 根据分类搜索
    searchByCid(index) {
      this.cindex = index;
      this.categoryId = index != -1 ? this.citems[index].id : "";
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.pages = 0;
      this.isDelete = 0;
      this.items = [];
      //请注意千万不清空 keyword
      this.loadData();
    },
    // 搜索
    searchData() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.pages = 0;
      this.isDelete = 0;
      this.items = [];
      //请注意千万不清空 keyword
      this.loadData();
    },
    //判断页面高度
    handleScrollx() {
      console.log('滚动高度', window.pageYOffset);
      if (window.pageYOffset > 400) {
        this.isShow = true
      }
      if (window.pageYOffset < 400) {
        this.isShow = false
      }
    },
    //登录显示
    loginShow(){
      this.loginshow = !this.loginshow
    },
    //登录方式选择切换
    loginways(){
      this.loginway = !this.loginway
      //this.tishi = "忘记密码"
      this.pwdlogin = true
      this.biaoti = "账号登录"
      this.placeholder = "手机号/邮箱"
      this.cplaceholder = "密码"

    },
    loginwayss(){
      this.loginway = !this.loginway
      //this.tishi = "获取验证码"
      this.pwdlogin = false
      this.biaoti = "手机登录"
      this.placeholder = "请输入手机号"
      this.cplaceholder = "验证码"
    },
    //加载更多文章
    loadMore(){
      if(this.pageNo < this.pages)
      {
        this.pageNo = this.pageNo+1
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          isDelete: this.isDelete,
          keyword: this.keyword,
          status: this.status,
          categoryId: this.categoryId,
        };
        articleService.findArticlePage(params).then(res => {
          if (res.status == 200) {
            const {records} = res.data;
            this.items = this.items.concat(records);
            console.log("加载更多")
          }
        })
      }
      if(this.pageNo >= this.pages)
      {
        //显示没有更多
        this.ismore = false
      }
    },
    // 滚动分页
    scrollBottom() {
      //距离底部200px时则开始触发函数
      var bottomOfWindow = document.documentElement.scrollHeight - document.documentElement.scrollTop - window.innerHeight <= 20
      console.log(document.documentElement.scrollHeight - document.documentElement.scrollTop - window.innerHeight);
      //如果此时到了滑动底部&&底部显示正在加载&&请求过的总数据小于后台总数据
      // if (bottomOfWindow && this.loadStat == 1) {
      if (bottomOfWindow ) {
        this.loadMore();
      }
    },
    throttle(fn, delay = 300) {
      let timer = null
      let firstTime = true
      console.log('!!1')
      return function (...args) {
        if (firstTime) {
          // 第一次加载
          fn.apply(this, args)
          return (firstTime = false)
        }
        if (timer) {
          // 定时器正在执行中，跳过
          return
        }
        timer = setTimeout(() => {
          clearTimeout(timer)
          timer = null
          fn.apply(this, args)
        }, delay)
      }
    },


  },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log('slide change');
    };
    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, Autoplay, A11y, EffectFade],
    };
  }
}


</script>
<style scoped>
@import '~@/assets/css/index.css';
@import '~@/assets/css/login.css';
</style>
